<template>
	<view class="wanl-page wanlshop-container">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				backgroundColor: '#fff'
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content flex justify-center" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					<view class="text-lg flex align-center" @tap="$wanlshop.to('/pages/page/city')">
						<text>{{common.addressText}}</text>
						<text style="margin-top: 16rpx;font-size: 30rpx;" class="wlIcon-jiang text-df"></text>

					</view>
				</view>
				<view class="action">
					<!-- <text class="wlIcon wlIcon-fenxiang"></text> -->
				</view>
			</view>
		</view>

		
		<wanl-scroll-list ref="list" :option="{page: 1,auto: true,safeArea: true}" @load="load($event,'load')"
			@refresh="load($event,'refresh')">
			<view class="">
				<view class="menu">
					<view :class="{cur:category_id == item.id}" @tap="choose(item)" class="item" v-for="(item,index) in menu" :key="index">
						{{item.name}}
					</view>
				</view>

				<view class="product">
					<view class="list">
						<view @tap="$wanlshop.to(`/pages/medicalcare/visit/store?id=${item.id}`)" class="item" v-for="(item,index) in goodsData" :key="item.id">
							<view class="t">
								<view class="l">
									<text class="name text-cut-2">{{item.title}}</text>
									<view class="tag flex justify-start align-center">
										<view class="city">
											<text>全{{common.addressText}}</text>
											<text>可服务</text>
										</view>
										<view class="baozhang flex justify-start align-center">
											<image src="/static/img/baozhang.png" mode="widthFix"></image>
											<text>平台保障</text>
										</view>
									</view>
									<view class="score flex justify-start align-center">
										<uni-rate readonly :allowHalf="true" :max="5" :value="item.comment_score"
											:size="16" color="#CCCCCC" active-color="#f00" />
										<text>{{item.comment_score}}</text>
										<text>{{item.comment_num}}条评论</text>
									</view>
									<view v-if="item.comment_num > 0" class="comment flex justify-start align-center">
										<view class="face" :style="{width:30 * (item.comment_user_avatar.length + 1) + 'rpx',height:item.comment_user_avatar.length > 0 ? '40rpx' : 0}">
											<image :style="{left:30 * k + 'rpx'}" :src="$wanlshop.oss(d)" mode="aspectFill" v-for="(d,k) in item.comment_user_avatar"></image>
										</view>
										<view class="content text-cut-1">{{item.comment_content}}</view>
									</view>
								</view>
								<image v-if="item.logo" :src="$wanlshop.oss(item.logo)" mode="aspectFill"></image>
							</view>
							<view class="b">
								<view class="tags">
									<block v-if="item.tags">
										<text v-for="(d,k) in item.tags.split(',')" :key="k">{{d}}</text>
									</block>
								</view>
								<view class="r flex justify-center align-center" @tap.stop="$wanlshop.phone(item.mobile)">
									<image src="/static/img/phone1.png" mode="widthFix"></image>
									<text>电话咨询</text>
								</view>
							</view>
						</view>
					</view>
				</view>


			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				goodsData: [],
				menu: [],

				banner: [],
				advert: [],
				hengfu: [],
				h: 0,
				keyword:'',
				category_id:''
			};
		},
		computed: {
			...mapState(['common'])
		},
		watch: {
			'common.cityId': {
				handler(newVal, oldVal) {
					if (newVal && oldVal) {
						this.$refs.list.refreshScrollView()
						this.load({
							page: 1
						}, 'refresh')
					}
				},
				deep: true,
				immediate: true
			}
		},
		onLoad(option) {
			this.h = uni.upx2px(86);
			this.category_id = option.id
			// if(option.id) {
			// 	this.loadData(option.id)
			// }
			if(option.keyword) {
				this.keyword = option.keyword
			}
		},
		methods: {
			choose(item) {
				this.category_id = item.id
				this.$refs.list.refreshScrollView()
				this.load({page:1},'refresh')
			},
			// 加载数据
			load(paging, key) {
				uni.request({
					url: '/addons/medicalvisit/api.shop/lists',
					method: 'post',
					data:{
						category_id:this.category_id,
						keyword:this.keyword,
						page: paging.page
					},
					success: res => {
						// let goodsData = res.data.data;
						// this.goodsData = goodsData;
						// this.$refs.list.refreshSuccess({
						// 	list: this.goodsData,
						// 	total: res.data.data.length
						// });
						this.$refs.list.showEmpty = false;
						
						let goodsData = res.data.data;
						if(key == 'load') {
							this.goodsData = [...this.goodsData, ...goodsData];
							this.$refs.list.loadSuccess({ list: this.goodsData, total: res.data.total });
						} else if(key == 'refresh') {
							this.goodsData = goodsData;
							this.$refs.list.refreshSuccess({ list: this.goodsData, total: res.data.total });
						}
						
					}
				});
			},
			async loadData(id) {
				await uni.request({
					url: '/addons/medicalvisit/api.index/childcate',
					method: 'post',
					data: {
						category_id: id || this.category_id
					},
					success: res => {
						this.menu = res.data
					}
				});
			},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/medicalcare/medicalvisit/list?keyword=${this.keyword}`, 'fade-in', 100);
			}
		}
	};
</script>


<style lang="scss">
	page {
		background-color: #f6f6f6;
	}


	.list {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0 20rpx;
	}

	.menu {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.item {
			margin-top: 20rpx;
			padding: 0 30rpx;
			height: 70rpx;
			background: #F9F9F9;
			border-radius: 10rpx;
			font-size: 26rpx;
			color: #333333;
			line-height: 70rpx;
			margin-right: 20rpx;
			&.cur {
				background-color: #57B966;
				color: #fff;
			}
		}
	}


.product {
		.list {
			.item {
				width: 100%;
				border-radius: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				margin-bottom: 10rpx;
				position: relative;
				&::after {
					position: absolute;
					content: "";
					display: inline-block;
					width: 100%;
					height: 10rpx;
					background-color: #F6F6F6;
					bottom: -10rpx;
					left: 0;
				}
				.b {
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					// align-items: center;
					.tags {
						flex: 1;
						// display: flex;
						// justify-content: flex-start;
						// flex-wrap: wrap;
						text {
							display: inline-block;
							color: #333;
							border: 1px solid #ededed;
							padding: 4rpx 10rpx;
							border-radius: 4rpx;
							margin-right: 10rpx;
							margin-bottom: 10rpx;
							font-size: 24rpx;
						}
					}
					.r {
						border: 1px solid #5CBBAD;
						width: 160rpx;
						height: 80rpx;
						background-color: rgba(92, 187, 173, 0.1);
						border-radius: 50rpx;
						image {
							width: 30rpx;
							height: 30rpx;
						}
						text {
							font-size: 26rpx;
							color: #5CBBAD;
							font-weight: 500;
							margin-left: 4rpx;
						}
					}
				}
				.t {
					display: flex;
					justify-content: space-between;
					> image {
						width: 160rpx;
						height: 123rpx;
						border-radius: 10rpx;
					}
					.l {
						flex: 1;
						margin-right: 20rpx;
						.name {
							font-size: 30rpx;
							color: #000;
							font-weight: 800;
							line-height: 44rpx;
						}
						.tag {
							margin-top: 10rpx;
							font-size: 26rpx;
							color: #333;
							flex-wrap: wrap;
							font-weight: 800;
							.city {
								// max-width: 340rpx;
								overflow: hidden;
								> text {
									display: inline-block;
									margin-right: 10rpx;
									margin-bottom: 6rpx;
								}
							}
							image {
								width: 30rpx;
								// height: 30rpx;
								margin-right: 5rpx;
							}
							.baozhang {
								flex-wrap: wrap;
								text {
									margin-right: 10rpx;
									margin-bottom: 6rpx;
								}
							}
						}
						.score {
							margin-top: 10rpx;
							width: 100%;
							> text {
								font-size: 26rpx;
								word-break: keep-all;
								color: #999;
								&:nth-child(3) {
									margin-left: 20rpx;
								}
								&:nth-child(2) {
									font-size: 28rpx;
									color: #f00;
									margin-left: 10rpx;
									font-weight: 500;
								}
							}
						}
						.comment {
							margin-top: 20rpx;
							box-sizing: border-box;
							.face {
								position: relative;
								image {
									position: absolute;
									top: 0;
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;
									
								}
							}
							.content {
								max-width: 260rpx;
								width: auto;
								color: #df7630;
								background-color: rgba(223, 118, 48, 0.1);
								font-size: 24rpx;
								padding: 4rpx 16rpx;
								border-radius: 2rpx;
							}
						}
					}
				}
			}
		}
	}
</style>